import React from './react';
import ReactDOM from './react-dom';
// 原生组件使用ref
class Sum extends React.Component {
    constructor(props) {
        super(props);
        this.a = React.createRef(); //{current:null}
        this.b = React.createRef(); //{current:null} 
        this.result = React.createRef(); //{current:null}
    }
    handleAdd = () => {
        let a = this.a.current.value;
        let b = this.b.current.value;
        this.result.current.value = a + b;
    }
    render() {
        return (
            <>
                <input ref={this.a} />+<input ref={this.b} />
                <button onClick={this.handleAdd}>=</button>
                <input ref={this.result} />
            </>
        );
    }
}
// 类组件使用ref
// class Form extends React.Component {
//   input
//   constructor(props) {
//       super(props);
//       this.input = React.createRef();
//   }
//   getFocus = () => {
//       this.input.current.getFocus();
//   }
//   render() { 
//       return (
//           <>
//           {/* 类组件的ref.current指向类组件的实例 */}
//               <TextInput ref={this.input} />   
//               <button onClick={this.getFocus}>获得焦点</button>
//           </>
//       );
//   }
// }
// class TextInput extends React.Component {
//   constructor(props) {
//       super(props);
//       this.input = React.createRef();
//   }
//   getFocus = () => {
//       this.input.current.focus();
//   }
//   render() {
//       return <input ref={this.input} />
//   }
// }
// 函数组件使用ref
class Form extends React.Component {
  constructor(props) {
      super(props);
      this.input = React.createRef();
  }
  getFocus = () => {
      this.input.current.focus();
  }
  render() { 
      return (
          <>
          {/* 类组件的ref.current指向类组件的实例 */}
              <ForwardRefComp ref={this.input} />   
              <button onClick={this.getFocus}>获得焦点</button>
          </>
      );
  }
}
// 你不能在函数组件上使用 ref 属性，因为他们没有实例
// Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧
// Ref 转发允许某些组件接收 ref，并将其向下传递给子组件
const ForwardRefComp = React.forwardRef(TextInput)
function TextInput(props, ref){
   return  <input ref={ref} />
};
ReactDOM.render(
  <div>
     <Sum />
    <div>---------------------------------</div> 
     {/* <Form /> */}
     <div>---------------------------------</div> 
     <Form />
  </div>
   ,
    document.getElementById('root')
);